<template>
  <view>
    <view
      :id="elId"
      :class="{ border: showBorder }"
      :style="{ 'border-left': showBorder ? '1px ' + borderColor + ' solid' : 'none' }"
      class="uni-grid"><slot /></view>
  </view>
</template>

<script>
export default {
  name: 'UniGrid',
  props: {
    // 每列显示个数
    column: {
      type: Number,
      default: 3
    },
    // 是否显示边框
    showBorder: {
      type: Boolean,
      default: true
    },
    // 是否显示边框
    borderColor: {
      type: String,
      default: '#d0dee5'
    },
    // 全局标记水平方向移动距离 ，起点为中心，负数为左移动，正数为右移动
    hor: {
      type: Number,
      default: 0
    },
    // 全局标记垂直方向移动距离 ，起点为中心，负数为上移动，正数为下移动
    ver: {
      type: Number,
      default: 0
    },
    // 是否正方形显示,默认为 true
    square: {
      type: Boolean,
      default: true
    },
    highlight: {
      type: Boolean,
      default: true
    }
  },
  provide () {
    return {
      grid: this
    }
  },
  data () {
    const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
    return {
      index: 0,
      elId
    }
  },
  created () {
    this.index = 0
    this.childrens = []
    this.pIndex = this.pIndex ? this.pIndex++ : 0
  },
  methods: {
    change (e) {
      this.$emit('change', e)
    },
    _getSize (fn) {
      uni.createSelectorQuery()
        .in(this)
        .select(`#${this.elId}`)
        .boundingClientRect()
        .exec(ret => {
          if (!ret[0]) {
            setTimeout(this._getSize(fn))
            return
          }
          let width = parseInt(ret[0].width / this.column) - 1 + 'px'
          typeof fn === 'function' && fn(width)
        })
    }
  }
}
</script>

<style lang="scss">
.uni-grid {
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	border-left: 1px #d0dee5 solid;
}
</style>
